<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>发光导航栏</title>
    <!-- 使用插件scss转成css有问题，暂不知道原因 -->
    <!-- <link rel="stylesheet" href="./028.css" type="text/css" /> -->
    <style>
      @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
      body {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: #1a1e23;
      }

      ul {
        display: flex;
        flex-direction: column;
        align-items: start;
        list-style-type: none;
      }
      ul li {
        padding: 6px 0;
      }
      ul li a {
        --fill-color: #198ce6;
        position: relative;
        display: block;
        padding: 4px 0;
        font: 700 3rem Raleway, sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        -webkit-text-stroke: 2px var(--fill-color);
        background: linear-gradient(var(--fill-color) 0 100%) left/0 no-repeat;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        transition: 0.5s linear;
      }
      ul li a:hover {
        background-size: 100%;
      }
    </style>
  </head>
  <body>
    <!--
      background-clip:text
      能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本
     -->
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">archives</a></li>
      <li><a href="#">tags</a></li>
      <li><a href="#">categories</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </body>
</html>
